<template> 
	<view class="personalData">
		<SRV-topbar title="个人资料" :isLeft="true"></SRV-topbar>
		<kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" :fixed="true" :blob="false" :maxWidth="100" :maxHeight="100"></kps-image-cutter>
		<view class="line" @click="chooseImage()">
			<text class="txt">头像</text>
			<view class="right">
				<image class="item" :src="head_portrait" mode="aspectFill"></image>
				<view class="jt"></view>
			</view>
		
		</view>
		<view class="line">
			<text class="txt">姓名</text>
			<view class="right" @click="openEdit(1)">
				<text class="item" style="width: 50vw;text-align: right;">{{username}}</text>
				<view class="jt"></view>
			</view>
		</view>
		<view class="line">
			<text class="txt">手机号</text>
			<view class="right">
				<text>{{mobile}}</text>
			</view>
		</view>
		<view class="line">
			<text class="txt">邀请人</text>
			<view class="right">
				<text>{{parentItem}}</text>
			</view>
		</view>
		<view class="bottom" :style="'height:' + bottomHeight + 'rpx;'" v-if="isUseWechat == 1">
			<button class="btn" v-if="!canIUseGetUserProfile" type="default" open-type='getUserInfo' @getuserinfo="getUserInfo" >
				使用微信信息
			</button>
			<button class="btn" v-if="canIUseGetUserProfile" type="default" @tap="getUserProfile" >
				使用微信信息
			</button>
		</view>
		<uni-popup ref="popup">
			<view class="show">
				<view class="title">修改姓名</view>
				<input type="text" placeholder="请输入修改名称"  v-model="editInfo.username"/>
				<view class="btn">
					<text @click="openEdit(0)" style="color: rgba(17 17 18, 0.8)">取消</text>
					<text @click="editInfoFun(1)" style="color: #e5c407;">确认</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
	export default {
		data() {
			return {
				url: '',
				username: '',
				mobile: '',
				head_portrait: '',
				isUseWechat: 0,
				parentItem: '',
				bottomHeight: 110,
				canIUseGetUserProfile: false,
				editInfo:{
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					group: uni.getStorageSync('group'),
					username: '',
					head_portrait: '',
				},
			}
		},
		components: {
			kpsImageCutter
		},
		methods: {
			chooseImage() {
				uni.chooseImage({
					success: (res) => {
						// 设置url的值，显示控件
						this.url = res.tempFilePaths[0];
					}
				});
			},
			onok(ev) {
				this.head_portrait = ev.path;
				this.url = "";
				uni.uploadFile({
					url: serve.apiUrl() + '/v1/file/images?appkey=' + uni.getStorageSync('appkey'),
					filePath: ev.path,
					name: 'file',
					formData: {
						'access-token': uni.getStorageSync('access-token'),
					},
					success: (uploadFileRes) => {
						let result = JSON.parse(uploadFileRes.data);
						if (result.code == 200) {
							this.editInfo.head_portrait = result.data.imgUrl;
							this.editInfoFun(0);
						} else {
							uni.showToast({
								title: result.message,
								icon: 'none',
							})
						}
					}
				});
			},
			oncancle() {
				// url设置为空，隐藏控件
				this.url = "";
			},
			getMemberInfo() {
				serve.request({
					url: '/member/member/index',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
					},
			        v: '/v2',
				}).then(res => {
					if (res.code == 200) {
						this.username = res.data.username;
						this.head_portrait = res.data.head_portrait;
						this.mobile = res.data.mobile;
						this.isUseWechat = res.data.isNew;
						this.parentItem = res.data.parentItem;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
						})
					}
				});
			},
			openEdit(type) {
				this.editInfo.username = this.username;
				this.$refs.popup.close();
				if(type == 1) {
					this.$refs.popup.open();
				}
			},
			getUserInfo(){
				var self = this;
				wx.getUserInfo({
					success:function(res){
						self.editInfo.username = res.userInfo.nickName;
						self.editInfo.head_portrait = res.userInfo.avatarUrl;
						self.editInfoFun(0);
					},
					fail:function(e){
						uni.showToast({
							title: '当前微信版本不支持，请升级',
							icon: 'none'
						});
					}
				});
				return ;
			},
			getUserProfile: function(e) {
				var self = this;
				wx.getUserProfile({
					desc: '用于完善会员资料', 
					success: (res) => {
						self.editInfo.username = res.userInfo.nickName;
						self.editInfo.head_portrait = res.userInfo.avatarUrl;
						self.editInfoFun(0);
					}
				})
			},
			editInfoFun(type) {
				if(type == 1 && this.editInfo.username == '') {
					uni.showToast({
						title: "请填写用户名",
						icon: 'none',
					});
					return ;
				}
				serve.request({
					url: '/member/member/edit-info',
					data: this.editInfo,
			        v: '/v2',
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none',
					});
					if(res.code == 200) {
						this.openEdit(0);
						this.getMemberInfo();
					}
					
				});
			},
		},
		onLoad() {
			if (uni.getSystemInfoSync().safeAreaInsets.top > 20) {
				this.bottomHeight = 150;
			}
			if (wx.getUserProfile) {
				this.canIUseGetUserProfile = true;
			}
			this.getMemberInfo();
		},
		onPullDownRefresh() {
			this.getMemberInfo();
		}
	}
</script>

<style scoped lang="scss">
	.personalData {
		.show{
			width: 80vw;
			background: #FFFFFF;
			border-radius: 20rpx;
			.title{
				text-align: center;
				font-size: 32rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1rpx rgba(60, 72, 104, 0.05) solid;
			}
			input{
				padding: 20rpx 30rpx;
				margin: 0 20rpx 30rpx 20rpx;
				border: 1px solid #333;
			}
			.btn{
				font-size: 36rpx;
				padding: 0rpx 90rpx 20rpx;
				display: flex;
				justify-content: space-between;
			}
		}
		.heng{
			width: 100%;
			height: 16rpx;
			background: rgba(251,251,253,0.8);
		}
		.line {
			height: 140rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0rpx 30rpx;
			font-size: 32rpx;
			border-bottom: 1rpx rgba(60, 72, 104, 0.05) solid;
            .txt{
			 color: #666666;
			}

			.right {
				position: relative;
				height: 100%;
				display: flex;
				align-items: center;
				color: #333333;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.item {
					margin-right: 30rpx;
				}

				.jt {
					position: absolute;
					right: 0rpx;
					top: 65rpx;
					content: '';
					border: 1rpx solid rgba(57, 72, 107, 0.5);
					border-width: 0 3rpx 3rpx 0;
					padding: 6rpx;
					transform: rotate(-45deg);
					-webkit-transform: rotate(-45deg);
				}

			}
		}
		.bottom {
			position: fixed;
			z-index: 100;
			width: 100%;
			bottom: 0upx;
			border-top: 1upx rgba(235, 236, 240, 1) solid;
			align-items: center;
			display: flex;
			z-index: 10;
			box-sizing: border-box;
			padding-bottom: env(safe-area-inset-bottom);
			height: 100upx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 1px 0px 0upx rgba(235, 236, 240, 1);
			padding-left: 30upx;
			font-size: 24upx;
			color: rgba(60, 72, 104, 0.5);
		
		
			.btn {
				position: absolute;
				top: 0;
				height: 100rpx;
				width: 100%;
				background: #ffd900;
				line-height: 100upx;
				text-align: center;
				font-size: 36upx;
				// font-weight: bold;
				// color: rgba(255, 255, 255, 1);
				right: 0upx;
			}
		}
	}
</style>
